
<template>
    <div class="background">
      <div class="font">
        <div class="img" @click="loginShow()">
          <image src="../../static/返回.png"></image>
        </div>
        <div class="head" @click="w()">随便看看 ></div>
      </div>
		<div class="logo">
		</div>
        <div class="middle"><h1>快背英语</h1></div>
        <div class="middle_1">背单词，来快背</div>
      <div class=register_set v-show="!show">
          <div class="input_value">
            <input type="email" name="" id="" v-model="form.name">
          </div>
          <div class="input_value">
             <input password type="safe-password" name="" id="" v-model="form.password">
          </div>
          <div class="register" @click ="login()">立刻登录</div>
      </div>
      <div class=register_set v-show="show">
          <div class="register" @click="register()">免费注册</div>
          <div class="register" @click ="loginShow()">立刻登录</div>
      </div>
    </div>
</template>

<script>
  import token from '../../utils/Token.js'
  const {getstorage} = token
  import api from '../../utils/Storage.js'
  const {getkey} = api
	export default {
		data() {
			return {
				form: {
									name:'',
									password:''
				},
        show:true,
        arr:[]
			}
		},
		onShow() {
      this.arr=getkey();
      this.form.name=this.arr[0];
      this.form.password=this.arr[1];
		},
		methods: {
      loginShow(){
        this.show=!this.show;
      },
			w(){
				uni.showModal({
				  content:'懒得你，注册！',
          showCancel:false,
          confirmText:'OK!'
				})
			},
      register(){
        // navigateTo 是跳转到普通页面
        // switchTab 跳转到tarber导航栏页面
		 uni.navigateTo({
		 	url:'/pages/zhuce/zhuce'
		 })
      },
      login(){
        uni.request({
            method: 'post',
            url: '/api/user/login', 
            data: {
                name:this.form.name,
                password:this.form.password
            },
            header: {'content-type': 'application/json',
            },
            success: (res) => {
                const {data:req} = res;
                console.log(req)
                if(req.code==200){
                  uni.setStorage({
                    key:'Authorization',
                    data:req.data
                  })
                 
                  
                }
               else if(req.code == 400){
                 console.log(chucuo)
                  uni.showModal({
                    content:'huh',
                    showCancel:false,
                    confirmText:'好哒，我会注意。'
                  })
                }
                
                // this.text = 'request success';
            },
            fail: (err) => {
              uni.showModal({
                content:err.msg,
                showCancel:false,
                confirmText:'好哒，我会注意。'
              })
            }
        });
  uni.switchTab({
    url:'/pages/indexz/indexz'
  })
		}
	}}
</script>

<style>
  .input_value{
    width: 60%;
    height: 15%;
    margin: auto;
    border-bottom: #000000 3px solid;
    position: relative;
    .uni-input-wrapper{
      text-align: center;
      position: absolute;
      bottom: -25%;
    }
  }
  .font{
    display: flex;
    justify-content: space-between;
  }
  .img{
    width: 30px;
    height: 30px;
    padding-top: 30%;
  }
  .img>image{
    width: 100%;
    height: 100%;
  }
	.logo{
		width: 100px;
		height: 100px;
		background-image: url("../../static/logo.jpg");
		background-size: 100% 100%;
		margin: auto;
		margin-top: 10%;
	}	
    .background{
        background-color: white;
        width: 100%;
        height: 100%;
    }
    .head{
        /* margin-left: 70%; */
        font-size: 20px;
        color: darkgray;
        padding-top: 30%;
    }
    .middle{
      text-align: center;
      padding-top: 13%;
	    margin: auto;
    }
    .middle_1{
        text-align: center;
        font-size: 28px;
        color: darkgray;
       
	    margin: auto;
		
    }
    .register_set{
      height: 40%;
    }
    .register{
        width: 330px;
        height: 45px;
        background:  rgba(255, 198, 122, 1);
        text-align: center;
        line-height: 45px;
        border-radius: 28px;
        
        font-size: 20px;
        margin: 10% auto 0 auto;
    }
</style>

 
